<template>
  <div>
    <section style="background: #ccc">
      <span
        v-for="(item, i) in list"
        :key="i"
        :style="{ background: i == index ? '#fff' : '#ccc' }"
        @click="cut(i)"
        >{{ item.name }}</span
      >
    </section>
    <div class="count">
      <img :src="list[index].url" alt="" />
      <!-- <img src="../assets/jingtian.jpeg" alt=""> -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        // 本地图片在 js里面使用的话要用require 来引入
      list: [
        {
          name: "沉鱼",
          url: require('../assets/jingtian.jpeg'),
        },
        {
          name: "落雁",
          url: require('../assets/tangyan.jpeg'),
        },
        {
          name: "闭月",
          url: require('../assets/yifei.jpeg'),
        },
        {
          name: "羞花",
          url: require('../assets/yuanyuan.jpeg'),
        },
      ],
      index: 0, // 存放点击tab的索引的
    };
  },
  methods: {
      cut(i){
           this.index = i;
      }
  },
};
</script>

<style lang="scss" scoped>
// scoped 独立样式作用域，使其样式只在当前页面有效果
.count {
  width: 100%;
}
img {
  width: 100%;
}
span {
  display: inline-block;
  line-height: 50px;
  width: 80px;
  text-align: center;
  cursor: pointer;
}
</style>